/*
  功能设置
*/
<template>
  <div class="setting" style="background-color:#fff;border-radius:5px;padding:30px">
    <el-tabs v-model="activeName">
        <el-tab-pane label="常规设置" name="first" :key="'first'">
          <div class="content">
              <div class="productBox">
                <span class="">产品浏览权限：</span>
                  <el-radio v-model="radio1" label="1" @change='boths'>所有人可见</el-radio>
                  <el-radio v-model="radio1" label="2" @change="VIP">会员可见</el-radio>
              </div>
              <div class="productBox" v-show="vip1">
                <span class='Grade'>指定等级：</span>
                <el-select v-model="value" filterable placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="productBox">
                <span>产品参数权限：</span>
                  <el-radio v-model="radio2" label="1">开启</el-radio>
                  <el-radio v-model="radio2" label="2">关闭</el-radio>
              </div>
              <div class="productBox">
                <span>产品推荐：</span>
                  <el-radio v-model="radio3" label="1" @change="open">开启</el-radio>
                  <el-radio v-model="radio3" label="2" @change="shut">关闭</el-radio>
              </div>
              <div class="Exhibition" v-show="exh">
                <div class='bition'>
                  <span class="both">展示页面：</span>
                  <span class="pages">
                    <el-checkbox label="产品详情页"></el-checkbox>
                    <el-checkbox label="购物车页面" v-model="checked"></el-checkbox>
                    <el-checkbox label="支付成功页"></el-checkbox>
                  </span>
                  <div class='recommend'>
                    <span  class="both">推荐标题：</span>
                    <el-input v-model="input" placeholder="猜你喜欢" class="lick"></el-input>
                    <el-checkbox label="隐藏标题"  v-model="checkeds" class='none'></el-checkbox>
                  </div>
                  <div class="rule">
                    <span  class="both">推荐规则：</span>
                    <el-button class='btion' @click="product()">修改规则</el-button>
                  </div>
                  <div class="proctu">
                    <span class="both">产品图缩放：</span>
                      <el-radio v-model="radio4" label="1">等比例</el-radio>
                      <el-radio v-model="radio4" label="2">拉伸</el-radio>
                      <el-radio v-model="radio4" label="3">填充</el-radio>
                      <el-radio v-model="radio4" label="4">不铺平</el-radio>
                  </div>
                </div>
              </div>
              <p class="solid"></p>
              <div id="information">
                <p class='inforCon'>
                  <span class="ination">信息介绍：</span>
                  <span class="addation">添加信息项</span>
                </p>
                <div id="project">
                  <div class="proCon">
                    <p>
                      <span>项目名称</span>
                      <span>操作</span>
                    </p>
                    <p class="proContent" v-for="(item,index) in projects" :key="index">
                      <span>{{item.name}}</span>
                      <img :src="item.src" alt="">
                    </p>
                  </div>
                </div>
              </div>
              <div class="btn">
                <p class="preservation">保存</p>
                <p class='cancel'>取消</p>
              </div>
          </div><!-- tab切换1内容 -->
        </el-tab-pane><!-- tab1 -->
        <el-tab-pane label="高级设置" name="second" :key="'second'">
          <div class="tabTwo">
            <div class="productTwo">
              <span class="code">产品编码：</span>
              <el-radio v-model="radios1" label="1">开启</el-radio>
              <el-radio v-model="radios1" label="2" >关闭</el-radio>
            </div>
            <div class="productTwo">
              <span class="code">产品收藏：</span>
              <el-radio v-model="radios2" label="1">开启</el-radio>
              <el-radio v-model="radios2" label="2" >关闭</el-radio>
            </div>
            <div class="productTwo">
              <span class="code">产品销售记录：</span>
              <el-radio v-model="radios3" label="1">开启</el-radio>
              <el-radio v-model="radios3" label="2" >关闭</el-radio>
            </div>
            <div class="productTwo">
              <span class="code">产品保证：</span>
              <el-radio v-model="radios4" label="1">开启</el-radio>
              <el-radio v-model="radios4" label="2" >关闭</el-radio>
            </div>
            <div class="stration">
              <div class="ProductLibrary">
                <p class="stradd">管理产品库：</p>
                <p class="code">添加产品库</p>
              </div>
              <div class="produName">
                <div class="ul">
                  <p v-for="(item,index) in names" :key="index">{{item.name}}</p>
                </div>
                <div class="uls">
                  <p>产品名称</p>
                  <p><img src="../../assets/img/bianji.png" alt=""></p>
                  <p><img src="../../assets/img/bianji.png" alt="" @click="ration"></p>
                  <p><img src="../../assets/img/xia.png" alt=""></p>
                  <p><img src="../../assets/img/del.png" alt=""></p>
                </div>
              </div>
              <div class="btn">
                <p class="preservation">保存</p>
                <p class='cancel'>取消</p>
              </div>
            </div>
          </div><!-- tab切换2内容 -->
        </el-tab-pane><!-- tab2 -->
    </el-tabs>
     
    <!-- 修改规则 -->
    <el-dialog :visible.sync="modify" width="36%" height='530px' class="radios">
        <span class="nav">产品推荐规则</span>
        <div class="navBox">
          <span>推荐规则：</span>
          <el-radio-group v-model="radio5">
            <el-radio v-for="(item,index) in appoit" :key="index" :label="item.value" @change="tab(index)">{{item.text}}</el-radio>
          </el-radio-group>
        </div>
        <div class="checks" v-if="nums==1">
          <p class="choice">选择商品：</p>
          <el-upload style="overflow:hidden;" class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="screen"  v-if="nums==2">
          <div  class="proctues" v-for="(e, index) in recomm" :key="index">
            <span class='gradms'>{{e.text}}</span>
            <el-select v-model="e.name" :placeholder="e.name" @change="selectEffect(e,index)">
              <el-option v-for="(item, index) in e.optcion" :key="index" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <p class="addOrder">
            <span  class='gradms'>排序方式：</span>
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span class="reduce">
              <el-radio v-model="radio6" label="1">升序</el-radio>
              <el-radio v-model="radio6" label="2">降序</el-radio>
            </span>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitForm()" style="width:25%;padding:0.85rem 0;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">保 存</el-button>
          <el-button @click="closeDialog()" style="width:25%;padding:0.85rem 0;font-size:1rem;border-radius:5px;">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 管理购物选项弹框 -->
      <el-dialog :visible.sync="buy" width="50%" height='530px' class="radios">
        <span class="nav">管理购物选项</span>
          <div class="guanDef">
            <p>产品库：<el-select v-model="value" filterable placeholder="请选择">
              <el-option v-for="item in optDef" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select></p>
            <p class='addProDef' @click="libraries">添加产品库</p>
          </div>
          <div class='defaults'>
            <div class="defaultsCon">
             <el-table :data="defColor" size="small" v-loading="loading" element-loading-text="拼命加载中" style="width:100%;" :header-cell-style="{'color':'#3D3D3D','font-size':'22px','height':'66px','font-weight':'400','background-color':'#fff','border-bottom':'none'}" class="customer-table">
              <el-table-column  prop="color" label="产品规格" width="130%" align="center">
              </el-table-column>
              <el-table-column  prop="black" label="规格值" width="260%" align="center">
              </el-table-column>
              <el-table-column label="启用" main-width="16%" align="center" property="value">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.is_show" active-color="#13ce66" :active-value="1" :inactive-value="0" inactive-color="#C1C1C1"></el-switch>
              </template>
            </el-table-column>
              <el-table-column label="操作" main-width="16%" align="center">
                <template slot-scope="scope">
                  <el-button type="text" style="font-size:1rem;color:#436AF2" @click="handleEdites(scope.$index, scope.row)">编辑</el-button> 
                  <el-button type="text" style="font-size:1rem;color:#436AF2" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            </div>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="addLibraries" width="48%" height='530px' class="radios">
        <span class="nav">添加产品规格</span>
        <p class='Specifications'><span>规格名：</span><el-input v-model="input"></el-input></p>
        <p class='Specificate'><span class="guiGe">规格值：</span><span class='addation cifica'>添加规格值</span></p>
        <div class="SpecUl">
          <p class="specLi"><span v-for="(item,index) in spice" :key="index">{{item.name}}</span></p>
          <div class="">
            <p class="specLis" v-for="(item,index) in spicing" :key="index">
              <span>{{item.name}}</span>
              <span class="specimg"><el-upload style="overflow:hidden;" class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess">
            <img v-if="imgUrl" :src="imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload></span>
              <span class="delent">{{item.del}}</span>
            </p>
        <span slot="footer" class="dialogFoot">
        <el-button @click="submitForm()" style="width:25%;padding:0.85rem 0;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        <el-button @click="closeDialog()" style="width:25%;padding:0.85rem 0;font-size:1rem;border-radius:5px;">取 消</el-button>
        </span>
          </div>
        </div>
      </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return{
      vip1:false,
      exh:false,
      nums:'0',
      activeName: "first",//选项卡切换默认显示第一个
      radio1:"1",//产品浏览权限默认所有人可见\
      radio2:"1",//产品浏览权限默认所有人可见
      radio3:"2",//产品浏览权限默认所有人可见
      radio4:"1",//产品浏览权限默认所有人可见
      radio5:'1',
      radio6:'1',
      radios1:'2',
      radios2:'2',
      radios3:'2',
      radios4:'2',
      projects:[
        {name:'产品详情',src:require("../../assets/img/del.png")},
        {name:'产品参数',src:require("../../assets/img/del.png")}
      ],
       options: [{
          value: '选项1',
          label: '普通会员级以上'
        }, {
          value: '选项2',
          label: '黄金会员级以上'
        }],
        value: '',
        checked:true,
        checkeds:true,
        input:'',
        modify:false,
        imageUrl:'',
        imgUrl:'',
        shop:false,
        screens:false,
        loading:false,
        recomm:[
          {
            text:'产品分类：',
            optcion:[
              { value: '1',name: '普通会员级以上'},
              { value: '2',name: '高级会员级以上'}
              ]
          },
          {
            text:'产品标签：',
            optcion:[
              { value: '1',name: '普通会员级以上'},
              { value: '2',name: '高级会员级以上'}
              ]
          },
          {
            text:'产品库：',
            optcion:[
             { value: '1',name: '普通会员级以上'},
             { value: '2',name: '高级会员级以上'}
              ]
          }
        ],
        appoit:[
          {text:'随机推荐',value:'1'},{text:'指定商品',value:'0'},{text:'按条件筛选',value:'2'}
        ],
        names:[{name:'产品库名称'},{name:'产品参数'},{name:'购物选项'},{name:'排序'},{name:'操作'},],
        buy:false,
        optDef: [{
          value: '选项1',
          label: '默认产品库'
        }, {
          value: '选项2',
          label: '黄金会员级以上'
        }],
      
        defColor:[
          {color:'颜色',black:'白色、黑色、蓝色、黄色、红色、橙色、紫色、绿色、灰色、褐色、透明、花色、',},
          {color:'尺码',black:'XXS、XS、S、M、L、XL、XXL、XXXL、'},
          {color:'时间',black:'日期'}
        ],
        addLibraries:false,
        input:'',
        spice:[{name:'产品规格'},{name:'图片'},{name:'操作'}],
        spicing:[{name:'规格1',src:require('../../assets/img/del.png'),del:'删除'}]
    }
  },
  methods:{
    selectEffect(e,index){
     console.log(index, this.recomm[index])
    },
    VIP(){
      this.vip1=true
    },
    boths(){
      this.vip1=false
    },
    open(){
      this.exh=true
    },
    shut(){
      this.exh=false
    },
    //产品推荐规则弹框
  product(){
    this.modify=true
  },
  ration(){
    this.buy=true
  },
  // 添加产品规格
  libraries(){
    this.addLibraries=true
  },
  //产品推荐 保存
    submitForms(){
      
    },
  //产品推荐取消
    closeDialog(){
      this.modify=false
      this.buy=false
      this.addLibraries=false
    },
    // 弹框选项卡
    tab(index){
      this.nums=index
    },
     //图片上传
      handleAvatarSuccess(res, file) {

    },
  }
}
</script>
<style scoped>
/* 下拉框颜色 */
/deep/ .el-select .el-input.is-focus .el-input__inner{border:  1px solid #E7E6E6;}
/deep/ .el-select .el-input__inner:focus{border:  1px solid #E7E6E6;}
/deep/ .el-range-editor.is-active, .el-range-editor.is-active:hover{border:  1px solid #E7E6E6;}/* 下拉框颜色 */
/deep/ .el-dialog__body{font-size:1rem;color:#333333;}
/deep/ .el-radio__label{font-size:1rem;color:#333333;}
/deep/ .el-tabs__active-bar{background-color:#436AF2;width: 20% !important;border-radius: 2px;margin-left:20%;padding: 0.05rem 0;}
/deep/ .el-tabs__nav-wrap::after{height:1px;}
/deep/ .el-tabs__nav{padding-bottom: 12px;}
/deep/ .el-tabs__item{font-size:1.125rem;color:#666666;margin-left: 5%;}
/deep/ .el-tabs__item.is-active{color:#3D3D3D;font-weight: 600;}
/deep/ .el-tabs__item:hover{color:#3D3D3D;font-weight: 600;}
/deep/ .el-radio__input.is-checked .el-radio__inner{border-color: #436AF2;background: #436AF2;}
/deep/ .el-radio__inner{width:20px;height:20px;}
/deep/ .el-radio__inner:hover{border-color: #436AF2;}
/deep/ .el-radio__inner::after{width:6px;height:6px;}
/deep/ .el-radio__input.is-checked+.el-radio__label{color:#333333}
.productBox{margin-bottom:30px;}
.productBox span{width: 25%;display: inline-block;text-align: right;}
.content{width: 50%;margin-left: 2%;overflow: hidden;margin-top: 1.1rem;}
.solid{width:100%;border: 1px solid #DEDEDE;}
#information .inforCon{width:95%;margin-left: 5%;display: flex;justify-content: space-between;}
#information span{display: inline-block}
#information .ination{margin-top: 0.8rem;}
.addation{width: 20%;border: 1px solid #CFCFCF;border-radius: 5px;text-align: center;padding: 0.7rem 0;cursor: pointer;background: #F7F7F7;color: #909090;}
#project{width: 85%;border: 1px solid #CFCFCF;float: right;margin-bottom:3rem;}
#project .proCon{width: 80%;margin: 0 auto}
#project .proCon p{display:flex;justify-content: space-between;margin-top: 2.5rem;}
#project .proCon .proContent{margin-bottom: 2.5rem;}
#project .proCon .proContent img{width: 5%;cursor: pointer;}
.content .btn{clear: both;width: 65%;margin-left: 25%;display: flex;justify-content: space-around;}
.content .btn p{width: 35%;text-align: center;padding:0.8rem 0;border-radius:5px;cursor: pointer;}
.content .btn  .preservation{background: #436AF2;color: #fff;}
.content .btn  .cancel{border: 1px solid #E5E4E4;color: #7F7F7F;}
.Exhibition{width:90%;margin-left: 6%;}
.bition .both{width: 25%;display: inline-block;text-align: right;}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{color: #333333;}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{border: 1px solid #436AF2;background-color: #436AF2;}
/deep/ .el-checkbox__label{font-size: 1rem;}
.recommend{margin-top: 1.5rem;}
.recommend .lick{width:32%;}
.recommend .none{float: right;margin-right: 8%;}
.rule {margin-top: 1.5rem;}
.proctu{margin-top: 1.5rem;}
/* 弹框 */
.dialog-footer{display: inline-block;width:100%;text-align: center;position: absolute;bottom: 3.5rem;left:0;}
.dialogFoot{display: inline-block;width:80%;text-align: center;position: absolute;bottom: 3.5rem;left:10%;}
.nav{font-size: 1.125rem;color: #3D3D3D;font-weight: bold;line-height: 60px;}
.navBox{font-size: 1rem;margin-top: 2.5rem;margin-left:2%;}
/deep/ .el-dialog{border-radius: 10px;height: 550px;}
.checks .choice{font-size: 1rem;}
.avatar-uploader {border: 1px solid #CFCFCF;width: 17%;text-align: center;margin-left:6%;padding: 2.3rem 0;}
/* .screen{border: 1px solid red;overflow: hidden;} */
.screen .gradms{width: 18%;display: inline-block;text-align: right;}
.screen .proctues{margin-top: 1rem;}
/* .addOrder{border: 1px solid red;} */
.addOrder .gradms{width: 18%;display: inline-block;text-align: right;}
.addOrder  .reduce{display: inline-block;margin-left: 4%;}
/* 高级设置 */
.tabTwo{margin-top: 1.1rem;overflow: hidden;}
.tabTwo .productTwo {margin-top: 1.5rem;}
.tabTwo .productTwo .code{width: 13%;display: inline-block;text-align: right;}
.tabTwo .stration{width: 75%;overflow: hidden;}
.tabTwo .stration .ProductLibrary{width: 69%;display: flex;justify-content: space-between;margin-left: 8%;}
.ProductLibrary .code{width: 20%;border: 1px solid #CFCFCF;border-radius: 5px;text-align: center;padding: 0.7rem 0;cursor: pointer;background: #F7F7F7;color: #909090;}
.ProductLibrary  .stradd{margin-top: 1.7rem;}
.produName{border: 1px solid #CFCFCF;width: 84%;overflow: hidden;float: right;margin-bottom: 2.5rem;}
.produName .ul {display: flex;justify-content: space-around;}
.produName .ul p{border-right: 1px solid #E7E6E6;width: 25%;text-align: center;}
.produName .uls {display: flex;justify-content: space-around;}
.produName .uls p{width: 25%;text-align: center;}
.produName .uls img{width: 17%;height:1.7rem;cursor: pointer;}
.tabTwo .btn{clear: both;width: 55%;margin-left: 15%;display: flex;justify-content: space-around;}
.tabTwo .btn p{width: 25%;text-align: center;padding:0.8rem 0;border-radius:5px;cursor: pointer;}
.tabTwo .btn  .preservation{background: #436AF2;color: #fff;}
.tabTwo .btn  .cancel{border: 1px solid #E5E4E4;color: #7F7F7F;}
.guanDef {display: flex;justify-content: space-between;margin-top: 1rem;}
.guanDef .addProDef{width: 20%;border: 1px solid #E7E6E6;border-radius: 5px;text-align: center;padding: 0.65rem 0;cursor: pointer;background: #F7F7F7;color: #909090;}
.defaults{border: 1px solid #CFCFCF;}
.defaults .defaultsCon{width: 90%;margin: 1rem auto;}
.defaConame {display: flex;justify-content: space-between;}
.defaConame span{text-align: center;width: 25%;}
.defaContentes .deConten{display: flex;justify-content: space-between;align-items: center}
.deConten .blues img{width: 15%; cursor: pointer;}
.deConten .blues .image2{margin-left: 8%;}
.specimg .avatar-uploader {border: 1px solid #EEEEEE;width: 100%;text-align: center;height:10px;}
.defaContentes p{width:25%;text-align: center;}
.defaContentes .dui img{width: 20%;}
/deep/ .Specifications .el-input__inner{width:35% !important;border: 1px solid #E7E6E6;}
.Specifications{display: flex;font-size: 1rem;}
.Specifications span{width: 13%;display: inline-block;margin-top:  0.5rem;}
.Specificate{display: flex;justify-content: space-between;font-size: 1rem;}
.Specificate .guiGe{margin-top: 0.7rem;}
.SpecUl{width: 75%;margin: 1rem auto;}
.SpecUl .specLis,.specLi{display: flex;justify-content: space-between;font-size: 1rem;align-items: center;}
.SpecUl .specLis{margin-top: 2rem;}
.specLis .specimg{width: 15%;text-align: center;}
.specLis .specimg img{width: 20%;}
.specLis .delent{color: #2F5FFA;cursor: pointer;}







</style>